<script setup lang="ts">
const changeHeaderColor = ref(false)
const onScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const ch = document.body.clientHeight
  // 滚动高度 大于 可移动高度则改变菜单头部
  if (scrollTop >= (ch - 80)) {
    changeHeaderColor.value = true
  }
  else {
    changeHeaderColor.value = false
  }
}
onMounted(() => {
  window.addEventListener('scroll', onScroll, false)
})

onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
})
</script>

<template>
  <!-- nuxt3 不允许单文件组件内有多个根节点元素，只能有一个 -->
  <div class="w-[100%] h-[100%]">
    <EHeader :style="changeHeaderColor ? { 'background-color': 'gray' } : ''" />

    <slot />
  </div>
</template>